<template>
    <div class="allContainer">
        <div class="searchContainer">
            <span class="inputLabel">容器</span>
            <el-select v-model="containerSearchData.dockerContainerId" placeholder="容器" class="searchInfoInput" clearable @clear="searchContainerInfoClear">
                <el-option :label="item.dockerName" :value="item.dockerContainerId" v-for="item in containerList" :key="item.id"/>
            </el-select>

            <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryContainerLogInfo()">查询日志</el-button>
        </div>
        <div class="logContainer">
            <span v-for="(item, index) in logComputed" :key="index">{{index}} - {{item}} <br /></span>
        </div>
        <div class="searchContainer">
            <span class="inputLabel">查询日志</span>
            <el-input v-model="searchInfo" placeholder="查询信息" class="searchInfoInput" clearable @clear="clearSearchInfo()"></el-input>
            <el-button type="primary" icon="RedoOutlined" class="searchButtonClass" :loading="refreshLoading" @click="refreshContainerLogInfo()">刷新日志</el-button>
        </div>
    </div>
</template>

<script name="ContainerLogManage" setup lang="ts">
import {containerContainerLogInfo, containerInfoQuery} from "@/request/container";
import {createTag} from "@/utils/ywuCommon";
import {computed, ref} from "vue";
import {useRoute} from "vue-router";

let containerSearchData = ref({
    dockerContainerId: '',
    beginTimestamp: '',
    endTimestamp: ''
});
let containerList = ref([]);
let info = ref([]);
let searchInfo = ref("");
let serviceContainerLogData =ref([]);
let beginTime = ref(0);
let endTime = ref(0);
let searchLoading = ref(false);
let refreshLoading = ref(false);

let logComputed = computed(() => {
    if (searchInfo.value) {
        let resInfo = [];
        serviceContainerLogData.value.forEach(resData => {
            if (resData.includes(searchInfo.value)) {
                resInfo.push(resData)
            }
        })
        return resInfo;
    } else {
        return serviceContainerLogData.value
    }
})

// 查询
containerInfoQuery(containerSearchData.value).then(res => {
    if (res["code"] === '200') {
        containerList.value = res.data
    }
});

// 创建标签
let route = useRoute();
createTag(route);

function queryContainerLogInfo() {
    searchLoading.value = true
    if (!containerSearchData.value.dockerContainerId) {
        return;
    }
    let time = new Date().getTime();
    beginTime.value = time - 5 * 60 * 1000;
    endTime.value = time
    // 设置查询参数
    containerSearchData.value.beginTimestamp = beginTime.value;
    containerSearchData.value.endTimestamp = endTime.value;
    // 查询日志
    containerContainerLogInfo(containerSearchData.value).then(res => {
        serviceContainerLogData.value = []
        res.data.forEach(info => {
            let tempInfo = info.replace("STDOUT", "");
            serviceContainerLogData.value.push(tempInfo)
        })
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = true
    })
}

function refreshContainerLogInfo() {
    refreshLoading.value = true
    if (!containerSearchData.value.dockerContainerId) {
        return;
    }
    let time = new Date().getTime();
    beginTime.value = time - 5 * 60 * 1000;
    endTime.value = time
    // 设置查询参数
    containerSearchData.value.beginTimestamp = beginTime.value;
    containerSearchData.value.endTimestamp = endTime.value;
    // 查询日志
    containerContainerLogInfo(containerSearchData.value).then(res => {
        serviceContainerLogData.value = []
        res.data.forEach(info => {
            let tempInfo = info.replace("STDOUT", "");
            serviceContainerLogData.value.push(tempInfo)
        })
        refreshLoading.value = false
    }).catch(res => {
        refreshLoading.value = true
    })
}

function clearSearchInfo() {
    searchInfo.value = ""
}

function searchContainerInfoClear() {
    serviceContainerLogData.value = []
}
</script>

<style scoped lang="less">
.allContainer {
    width: 98%;
    height: 100%;
    margin: 1% 0.2% 0.2%;
    .searchContainer {
        width: 100%;
        height: 10%;
        .searchInfoInput {
            width: 15%;
            padding-left: 1%;
        }
        .inputLabel {
            padding-left: 1%;
            font-weight: 700;
            font-size: 15px;
            color: #606266;
            //去除光标
            caret-color: transparent;
        }
        .searchButtonClass {
            margin-left: 1%;
        }
    }
    .logContainer {
        margin: 1% 0.2% 0.2%;
        width: 100%;
        height: 80vh;
        background-color: #1B2831FF;
        overflow: scroll;
        span {
            padding-left: 1%;
            color: aqua;
        }
    }
}


</style>